const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const connect = require('gulp-connect');
const sourcemaps = require('gulp-sourcemaps');

gulp.task('copyHtml', done => { //第一个任务，把所有html文件丢到dist文件里。自动更新
    gulp.src('*.html').pipe(gulp.dest('dist')).pipe(connect.reload());
    done();
});
gulp.task('copyImg', done => {
    gulp.src('imgs/**').pipe(gulp.dest('dist/imgs')).pipe(connect.reload());
    done();
})
gulp.task('copyJs', done => {
    gulp.src('js/*.js').pipe(gulp.dest('dist/js')).pipe(connect.reload());
    done();
})
gulp.task('sass', done => { //第二个任务，把sass内的文件都转化问
    gulp.src('sass/*.scss').pipe(sourcemaps.init()) //先初始化
        .pipe(sass({ outputStyle: 'compressed' })).pipe(sourcemaps.write('./')).pipe(gulp.dest('dist/css')).pipe(connect.reload())
    done();
});
gulp.task('watch', done => { // 监听
    gulp.watch('*.html', gulp.series('copyHtml'));
    gulp.watch('sass/*.scss', gulp.series('sass'));
    gulp.watch('imgs/**', gulp.series('copyImg'));
    gulp.watch('js/*.js', gulp.series('copyJs'))
    done();
})
gulp.task('server', done => { //开服务器
    connect.server({
        root: 'dist',
        livereload: true
    })
    done();
})
gulp.task('default', gulp.series('server', 'watch'));